<template>
  <div class="resume_header" v-show="isShow">
    <span>公司信息</span>
    
    
    <el-tooltip :content="content">
      <el-button type="primary" class="btn_edit" @click="confirm()">提交</el-button>
    </el-tooltip>
  </div>
  <div class="resume_center" v-show="isShow">
    <!-- 公司信息 -->
    <div class="basic_info" v-if="!proxy.$store.state.enterpriseState.isEditEInfo">

      <el-button class="btn_edit  hover_btn" type="primary" @click="editEnterpriseInfo()">编辑
      </el-button>
      <img :src="avatar" class="enterprise_avatar " title="IWu" />
      <p class="enterprise_txt enterprise_name">{{businessName}}</p>
      <p class="enterprise_txt">
        <span class="enterprise_detail">{{ENature}}</span>
        <span class="enterprise_detail">{{ESizeMin}}-{{ESizeMax}}人</span>
        <span class="enterprise_detail">{{EIndustry}}</span>
      </p>

      <p class="enterprise_introduce">{{EContent}}</p>

    </div>

    <EInfo v-if="proxy.$store.state.enterpriseState.isEditEInfo"></EInfo>

    <!-- 公司优势 -->
    <div class="enterprise_advantages resume_subtitle" v-if="!proxy.$store.state.enterpriseState.isEditEAdvantage">
      <el-button class="btn_edit hover_btn" type="primary" @click="editEAdvantage()">编辑</el-button>
      <p class="card_title">公司优势</p>
      <ul class="advantages">
        <li class="advantage" v-for="(item,index) in EAdvantage" :key="index">
          {{EAdvantage[index]}}
        </li>
      </ul>
    </div>
    <EAdvantage v-if="proxy.$store.state.enterpriseState.isEditEAdvantage"></EAdvantage>
    <!-- 联系方式及地址 -->
    <div class="enterprise_contact resume_subtitle" v-if="!proxy.$store.state.enterpriseState.isEdiEContact">
      <el-button class="btn_edit hover_btn" type="primary" @click="editEContact()">编辑</el-button>
      <p class="card_title">联系方式及地址</p>
      <p class="enterprise_contact_mode">联系人：<span class="contact_span">{{contactName}}</span></p>
      <p class="enterprise_contact_mode">联系电话： <span class="contact_span">{{contactPhone}}</span></p>
      <p class="enterprise_contact_mode">联系邮箱： <span class="contact_span">{{contactEmail}}</span></p>
      <p class="enterprise_contact_mode">联系地址： <span class="contact_span">{{contactAddress}}</span></p>
    </div>
    <EContact v-if="proxy.$store.state.enterpriseState.isEdiEContact"></EContact>
    <!-- 工商信息 -->
    <div class="business_info resume_subtitle" v-if="!proxy.$store.state.enterpriseState.isEditBusinessInfo">
      <el-button class="btn_edit hover_btn" type="primary" @click="editEBusinessInfo()">编辑</el-button>
      <p class="card_title">工商信息</p>
      <ul class="business_info_warpper">
        <li class="business_info_sub">公司全称：
          <span>{{businessName}}</span>
        </li>
        <li class="business_info_sub">成立时间：
          <span>{{businessSetTime}}</span>
        </li>
        <li class="business_info_sub">注册资本：
          <span>{{businessRegCapital}}万元</span>
        </li>
        <li class="business_info_sub">法人代表：
          <span>{{businessLegalRepresentative}}</span>
        </li>
      </ul>
    </div>
    <EBusinessInfo v-if="proxy.$store.state.enterpriseState.isEditBusinessInfo"></EBusinessInfo>
  </div>
</template>
<script lang='ts'>

import EInfo from "./einfo/EInfo.vue";
import EAdvantage from "./einfo/EAdvantage.vue"
import EContact from "./einfo/EContact.vue"
import EBusinessInfo from "./einfo/EBusinessInfo.vue"
import { reactive, ref, onMounted, onUnmounted, computed, getCurrentInstance, watch, onBeforeMount } from "vue"
import { useStore } from "vuex";
import { elmessage, data } from "@/hook/hook"
import { getEAllInfo, confirmEInfo } from "@/api/enterpriseApi"
import { getAvatar, loginOu } from "@/api/authApi"
import { useRouter } from "vue-router"

export default {
  name: 'EnterprieInfo',
  components: {
    EInfo, EAdvantage, EContact, EBusinessInfo,
  },
  setup() {
    // 头像
    const avatar = ref()
    // const avatar=ref()
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
    const store = useStore()
    const router = useRouter()
    const businessName = ref()
    // const content = ref()
    // const advantageArr=ref()
    const eInfo = store.state.enterpriseState.EBasicInfo
    const eContect = store.state.enterpriseState.EContact
    const eBusiness = store.state.enterpriseState.EBusinessInfo
    const initInfo = {
      ENature: computed(() => eInfo.ENature),
      ESizeMin: computed(() => eInfo.ESizeMin),
      ESizeMax: computed(() => eInfo.ESizeMax),
      EIndustry: computed(() => eInfo.EIndustry),
      EContent: computed(() => eInfo.EContent),
      contactName: computed(() => eContect.contactName),
      contactPhone: computed(() => eContect.contactPhone),
      contactEmail: computed(() => eContect.contactEmail),
      contactAddress: computed(() => eContect.contactAddress),
      businessName: computed(() => eBusiness.businessName),
      businessSetTime: computed(() => eBusiness.businessSetTime),
      // 注册资本
      businessRegCapital: computed(() => eBusiness.businessRegCapital),
      // 法人代表
      businessLegalRepresentative: computed(() => eBusiness.businessLegalRepresentative),
      EAdvantage: computed(() => store.state.enterpriseState.EAdvantage),
    }
    const content = ref("您修改的信息需提交审核")
    const confirm = () => {
      const newData = {
        ...data(),
        ...eInfo,
        ...eContect,
        ...eBusiness,
        EAdvantage: store.state.enterpriseState.EAdvantage
      }
      confirmEInfo(newData).then((res: any) => {
        if (res.data["code"] == "200") {
          elmessage(res.data["message"], res.data["type"])
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data);

        }
      })

    }

    const isEdit = ref(true)
    // 显示编辑公司信息页

    const editEnterpriseInfo = () => {
      store.commit("editEInfo")
    }
    // 显示编辑公司优势页
    const editEAdvantage = () => {
      store.commit("editEAdvantage")
    }
    // 显示编辑公司联系方式和地址页
    const editEContact = () => {
      store.commit("editEContact")
    }
    // 显示编辑工商信息页
    const editEBusinessInfo = () => {
      store.commit("editEBusinessInfo")
    }



    const isShow = ref(false)
    const init = async () => {
      console.log(data());
      
      await getEAllInfo(data()).then(async (res: any) => {
        if (res.data["code"] == "200") {
          eInfo.ENature = res.data["ENature"]
          eInfo.ESizeMin = res.data["ESizeMin"]
          eInfo.ESizeMax = res.data["ESizeMax"]
          eInfo.EIndustry = res.data["EIndustry"]
          eInfo.EContent = res.data["EContent"]
          eContect.contactName = res.data["contactName"]
          eContect.contactPhone = res.data["contactPhone"]
          eContect.contactEmail = res.data["contactEmail"]
          eContect.contactAddress = res.data["contactAddress"]
          eBusiness.businessName = res.data["businessName"]
          eBusiness.businessSetTime = res.data["businessSetTime"]
          eBusiness.businessRegCapital = res.data["businessRegCapital"]
          eBusiness.businessLegalRepresentative = res.data["businessLegalRepresentative"]
          store.state.enterpriseState.EAdvantage = res.data["EAdvantage"]

        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data);

        }

      })
      await getAvatar(data()).then((res: any) => {
        if (res.data.type == "image.jpeg/png") {
          // 返回text/html表示请求图片失败
          avatar.value = window.URL.createObjectURL(res.data)
          store.state.enterpriseState.EBasicInfo.EAvatar = avatar.value
          isShow.value = true
        } else {
          console.log(res.data);
        }
      })
    }

    const watchVuexAvatar = computed(() => store.state.enterpriseState.EBasicInfo.EAvatar)
    watch(watchVuexAvatar, (newval, oldval) => {
      avatar.value = store.state.enterpriseState.EBasicInfo.EAvatar
    }, { immediate: true, deep: true })
    onBeforeMount(async () => {
      await init()
      await initInfo

    })
    return {
      proxy,
      avatar,
      isEdit,
      content,
      confirm,
      editEnterpriseInfo,
      editEAdvantage,
      editEContact,
      editEBusinessInfo,
      ...initInfo,
      isShow,
    }


  }
}
</script>
<style scoped>
/* 公司优势 */

.advantage {
  float: left;
  font-size: 14px;
  padding: 6px 10px;
  /* margin-left: ; */
  /* width: 120px; */
  color: #9497a1;
  border: 1px solid rgba(148, 151, 161, .3);
  border-radius: 2px;
  margin-right: 10px;
  margin-top: 15px;
}

/* 工商信息 */
.business_info_sub {
  width: 50%;
  float: left;
  margin-top: 15px;
  margin-bottom: 5px;
}

.business_info {
  height: 180px !important;
}

.business_info_warpper {
  font-size: 16px;
}

/* 联系方式及地址 */
.contact_span {
  color: #4c4c4c;
}

.enterprise_contact_mode {
  font-size: 16px;

  color: #a6a6a6;
  line-height: 24px;
}

/* 公司介绍 */
.enterprise_name {
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 28px;
}

.enterprise_txt {
  margin-bottom: 12px;
  margin-left: 125px;

}

.enterprise_introduce {
  font-size: 16px;
  line-height: 20px;
  text-indent: 2em;
  padding-right: 2px;
  white-space: pre-wrap;
  color: #4c4c4c;
  margin-top: 50px;

}

.enterprise_detail {
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid rgb(191, 193, 188);
  width: 100px;
}

.basic_info:hover .hover_btn {
  display: block;
}

.btn_edit {

  position: absolute;
  margin-left: 1080px;
  /* float: right;
  right: 100px; */
  /* right: 10px; */
  /* margin-left: 750px; */
}



.card_title {
  font-size: 22px;
  margin-bottom: 30px;
}

.resume_subtitle {
  padding-top: 10px;
  padding-left: 20px;
  height: 160px;
}


/* 公司头像 */

.enterprise_avatar {
  position: absolute;
  height: 110px;
  width: 110px;
  border-radius: 100%;
  margin-right: 20px;


}

.basic_info {
  padding-left: 20px;
  padding-top: 20px;
  /* position: relative; */
  height: auto;
  padding-bottom: 20px;

  /* background-color: #FFF; */
}

.basic_info:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}

.resume_subtitle:hover {

  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}

.resume_subtitle:hover .hover_btn {
  display: block;
}

.hover_btn {
  display: none;
}

.resume_center {
  font-family: '微软雅黑';
  height: auto;
  background-color: #FFF;
  padding-bottom: 50px;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  min-width: 1200px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  /* justify-content: space-between; */
}
</style>